:root {
    --msg-margin-leftright: 20px;
    --msg-margin-top: 7px;
    --msg-minihight: 20px;
    --msg-r-bcolor: #383838;
    --msg-r-color: #b5b5b5;
}

.msg-sr, .msg-r {
    /* display: flex;
    align-items: center; */ /* make text vertical center, need `flex` */
    min-height: var(--msg-minihight);
    margin-left: var(--msg-margin-leftright);
    margin-right: calc(var(--msg-margin-leftright) - var(--console-msgs-scrollwidth));
    margin-top: var(--msg-margin-top);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: small;
    color: var(--msg-r-color);
    word-break: break-all;  /* avoid division by word, and auto new line */
    border-radius: calc(var(--msg-minihight) / 2);
}

.msg-sr > :nth-child(1) {
    color: #ffae00;
}

.msg-sr > :nth-child(1) ~ div {
    background-color: var(--msg-r-bcolor);
    margin-left: -10px;
    margin-right: -10px;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 3px;
}

.msg-r {
    background-color: var(--msg-r-bcolor);
}

.msg-sr {
    background-color: #96650b;
}

/* .msg-sr > :nth-child(1) {
} */